<template>
<el-row>
 <el-col :span="18"><el-input v-model="searchText" placeholder="请输入要搜索的名字"  @keyup.enter="search()" ></el-input></el-col>
 <el-col :span="6" ><el-button type="primary" icon="el-icon-search" @click="search" :disabled="!isSearchEnable"
  v-loading.fullscreen.lock="waiting" >搜索</el-button></el-col>
</el-row>

</template>

<script>
import axios from 'axios'

export default {
    data() {
        return {
            searchText:'',
            waiting:false
        }
    },
    methods:{
        search(){
            this.waiting = true
           axios.get(`https://api.github.com/search/users?q=${this.searchText}`)
           .then((res)=>{
            this.waiting=false
            console.log('查询成功');
            let totalCount = res.data.total_count
            let userList = res.data.items
            console.log(totalCount);
            console.log(userList);
            //发消息
            this.$eventBus.$emit('userList',totalCount,userList)
            
           }).catch((err)=>{
            this.waiting=false
            console.log("查询失败");
            console.log(err.message);
            this.$message.error(err.message)
           })
        }
    },
    computed:{
        isSearchEnable(){
            return this.searchText!=null && this.searchText!==''
        }
    }
}
</script>

<style>

</style>